/*
  学习目标：性能优化-
*/
import React from 'react';

export default class App extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  handleClick = () => {
    // ✅ [..this.state.list] 表示新的数组，内存地址已变
    // this.setState({ list: [...this.state.list, 4] });
    // ❌ 会导致list的内存地址，一直没有变化。旧版得React中会导致隐藏bug
    this.state.list.push(4);
    this.setState(this.state);
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>点我修改list</button>
        <Child list={list}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { list } = this.props;
    return <h1>Child - {list}</h1>;
  }
}
